<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Spirit8</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet/less" href="./css/reset.less" />
    <link rel="stylesheet/less" href="./css/common.less" />
    <link rel="stylesheet/less" href="./css/index.less" />
  </head>
  <body>
    <!-- 导航栏开始 -->
    <nav class="navbar navbar-default navBgColor">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1"
            aria-expanded="false"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#home">Spirit8</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav"></ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#team">team</a></li>
            <li><a href="#service">Service</a></li>
            <li><a href="#slients">Slients</a></li>
            <li><a href="#work">Work</a></li>
            <li><a href="#testimonials">Testimonials</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
    <!-- 导航栏结束 -->

    <!-- 轮播图开始 -->
    <div id="banner">
      <h1>wELCOME on <span>spirit8</span></h1>
      <h5>
        We are a digital agency with <span>years of experience</span> and with
        <span>extraordinary people</span>
      </h5>
      <div class="arrow-btn">
        <img src="./images/arrow.png" alt="" />
      </div>
    </div>
    <!-- 轮播图结束 -->

    <!-- 内容开始 -->
    <div class="content">
      <div id="about">
        <div class="container">
          <div class="about-left">
            <img src="./images/about-background.png" alt="" />
          </div>
          <div class="about-right">
            <div class="small-title">About us</div>
            <div class="big-title">Some words <span>about us</span></div>

            <div class="line"></div>
            <div class="desc">
              We love building and rebuilding brands through our specific
              skills. Using colour, fonts, and illustration, we brand companies
              in a way they will never forget.
            </div>
            <div class="list">
              <div class="item">
                <img src="./images/icon16.png" alt="" />
                <span>Mission -</span> We deliver uniqueness and quality
              </div>
              <div class="item">
                <img src="./images/icon16.png" alt="" />
                <span>Skills -</span> Delivering fast and excellent results
              </div>
              <div class="item">
                <img src="./images/icon16.png" alt="" />
                <span>Clients -</span> Satisfied clients thanks to our
                experience
              </div>
            </div>
            <div class="about-btn">
              <img src="./images/about-btn.png" alt="" />
              Browse our work
            </div>
          </div>
        </div>
      </div>
      <div id="team">
        <div class="carousel-title">Meet <span>our team</span></div>
        <div class="long-line"></div>
        <div class="short-line"></div>
        <div class="carousel">
          <div
            id="carousel-example-generic"
            class="carousel slide"
            data-ride="carousel"
          >
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li
                data-target="#carousel-example-generic"
                data-slide-to="0"
                class="active"
              ></li>
              <li
                data-target="#carousel-example-generic"
                data-slide-to="1"
              ></li>
              <li
                data-target="#carousel-example-generic"
                data-slide-to="2"
              ></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <div class="carousel-item">
              
                  <div class="item-box-container">
                    <div class="item-box">
                   
                        <div class="carousel-box">
                          <div class="circle">
                            <img src="./images/avatar.jpg" alt="" />
                          </div>
                          <div class="avatar-title">Jason Statham</div>
                          <div class="avatar-subtitle">Knife designer</div>
                          <div class="desc">
                            Do not seek to change what has come before. Seek to
                            create that which has not.
                          </div>
                        
                      </div>
                      <div class="carousel-box">
                      
                          <div class="circle">
                            <img src="./images/avatar.jpg" alt="" />
                          </div>
                          <div class="avatar-title">Jason Statham</div>
                          <div class="avatar-subtitle">Knife designer</div>
                          <div class="desc">
                            Do not seek to change what has come before. Seek to
                            create that which has not.
                          </div>
                      
                      </div>
                    </div>
                    <div class="item-box">
                    
                        <div class="carousel-box">
                          <div class="circle">
                            <img src="./images/avatar.jpg" alt="" />
                          </div>
                          <div class="avatar-title">Jason Statham</div>
                          <div class="avatar-subtitle">Knife designer</div>
                          <div class="desc">
                            Do not seek to change what has come before. Seek to
                            create that which has not.
                          </div>
                      
                      </div>
                      <div class="carousel-box">
                      
                          <div class="circle">
                            <img src="./images/avatar.jpg" alt="" />
                          </div>
                          <div class="avatar-title">Jason Statham</div>
                          <div class="avatar-subtitle">Knife designer</div>
                          <div class="desc">
                            Do not seek to change what has come before. Seek to
                            create that which has not.
                          </div>
                      
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="item">
                <div class="carousel-item"></div>
            </div>
            <div class="item">
                <div class="carousel-item"></div>
            </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="services">
        <div class="container">
          <div class="title">take a look at <span>our services</span></div>
          <div class="long-line"></div>
          <div class="short-line"></div>
          <div class="desc">
            Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
            Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
            written in 45 BC. This book is a treatise on the theory of ethics,
            very popular during the Renaissance. The first line of Lorem Ipsum,
            "Lorem ipsum dolor sit amet..", comes from a line in section
            1.10.32.
          </div>

          <div class="item-box">
            <div class="item-box-in">
              <div class="item">
                <div class="item-icon">
                  <img src="./images/Forma 1.png" alt="" />
                </div>
                <div class="item-title">Web design</div>
                <div class="item-desc">
                  The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                  comes from a line in section 1.10.32.
                </div>
              </div>
              <div class="item">
                <div class="item-icon">
                  <img src="./images/Forma 2.png" alt="" />
                </div>
                <div class="item-title">Mobile apps</div>
                <div class="item-desc">
                  The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                  comes from a line in section 1.10.32.
                </div>
              </div>
            </div>
            <div class="item-box-in">
              <div class="item">
                <div class="item-icon">
                  <img src="./images/Forma 3.png" alt="" />
                </div>
                <div class="item-title">PHOTOGRAPHY</div>
                <div class="item-desc">
                  The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                  comes from a line in section 1.10.32.
                </div>
              </div>
              <div class="item">
                <div class="item-icon">
                  <img src="./images/Forma 4.png" alt="" />
                </div>
                <div class="item-title">Marketing</div>
                <div class="item-desc">
                  The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                  comes from a line in section 1.10.32.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="clients">
        <div class="title">SOME OF OUR CLIENTS</div>
        <div class="long-line"></div>
        <div class="short-line"></div>
        <div
          id="carousel-example-generic1"
          class="carousel slide"
          data-ride="carousel"
        >
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li
              data-target="#carousel-example-generic1"
              data-slide-to="0"
              class="active"
            ></li>
            <li data-target="#carousel-example-generic1" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic1" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <div class="clients-item">
         
                <div class="logos"><img src="./images/logos.png" alt="" /></div>
              </div>
            </div>

            <div class="item">
              <div class="clients-item">
               
                <div class="logos"><img src="./images/logos.png" alt="" /></div>
              </div>
            </div>
            <div class="item">
              <div class="clients-item">
              
                <div class="logos"><img src="./images/logos.png" alt="" /></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="work">
        <div class="container">
          <div class="title">take a look at <span>our work</span></div>
          <div class="long-line"></div>
          <div class="short-line"></div>
          <div class="desc">
            Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
            Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
            written in 45 BC. This book is a treatise on the theory of ethics,
            very popular during the Renaissance. The first line of Lorem Ipsum,
            "Lorem ipsum dolor sit amet..", comes from a line in section
            1.10.32.
          </div>
          <div class="item-box">
            <div class="item-box-title-box">
              <div class="item-box-title-left">Filter by type</div>
              <div class="item-box-title-right">
                <span class="active">All | </span><span>Web design | </span> 
                <span>Mobile design | </span><span>Photograpy</span>
                <select name="" id="">
                  <option value="">All</option>
                  <option value="">Web design</option>
                  <option value="">Mobile design</option>
                  <option value="">Photograpy</option>
                </select>
              </div>
            </div>
            <div class="item-box-container">
              <div class="images-box">
                <div class="image-box">
                  <div class="image-fashion">
                    <div class="fashion-title">Trend and fashion</div>
                    <div class="fashion-subtitle">Website design</div>
                    <div class="fashion-icon">+</div>
                  </div>
                  <img src="./images/image-box01.png" alt="" />
                </div>
              </div>
              <div class="images-box">
                <div class="image-box">
                  <div class="image-fashion">
                    <div class="fashion-title">Trend and fashion</div>
                    <div class="fashion-subtitle">Website design</div>
                    <div class="fashion-icon">+</div>
                  </div>
                  <img src="./images/image-box01.png" alt="" />
                </div>
              </div>
              <div class="images-box">
                <div class="image-box">
                  <div class="image-fashion">
                    <div class="fashion-title">Trend and fashion</div>
                    <div class="fashion-subtitle">Website design</div>
                    <div class="fashion-icon">+</div>
                  </div>
                  <img src="./images/image-box01.png" alt="" />
                </div>
              </div>
              <div class="images-box">
                <div class="image-box">
                  <div class="image-fashion">
                    <div class="fashion-title">Trend and fashion</div>
                    <div class="fashion-subtitle">Website design</div>
                    <div class="fashion-icon">+</div>
                  </div>
                  <img src="./images/image-box01.png" alt="" />
                </div>
              </div>
              <div class="images-box">
                <div class="image-box">
                  <div class="image-fashion">
                    <div class="fashion-title">Trend and fashion</div>
                    <div class="fashion-subtitle">Website design</div>
                    <div class="fashion-icon">+</div>
                  </div>
                  <img src="./images/image-box02.png" alt="" />
                </div>
              </div>
              <div class="images-box">
                <div class="image-box">
                  <div class="image-fashion">
                    <div class="fashion-title">Trend and fashion</div>
                    <div class="fashion-subtitle">Website design</div>
                    <div class="fashion-icon">+</div>
                  </div>
                  <img src="./images/image-box02.png" alt="" />
                </div>
              </div>
              <div class="images-box">
                <div class="image-box">
                  <div class="image-fashion">
                    <div class="fashion-title">Trend and fashion</div>
                    <div class="fashion-subtitle">Website design</div>
                    <div class="fashion-icon">+</div>
                  </div>
                  <img src="./images/image-box02.png" alt="" />
                </div>
              </div>
              <div class="images-box">
                <div class="image-box">
                  <div class="image-fashion">
                    <div class="fashion-title">Trend and fashion</div>
                    <div class="fashion-subtitle">Website design</div>
                    <div class="fashion-icon">+</div>
                  </div>
                  <img src="./images/image-box02.png" alt="" />
                </div>
              </div>
              <div class="images-box">
                <div class="image-box">
                  <div class="image-fashion">
                    <div class="fashion-title">Trend and fashion</div>
                    <div class="fashion-subtitle">Website design</div>
                    <div class="fashion-icon">+</div>
                  </div>
                  <img src="./images/image-box03.png" alt="" />
                </div>
              </div>
              <div class="images-box">
                <div class="image-box">
                  <div class="image-fashion">
                    <div class="fashion-title">Trend and fashion</div>
                    <div class="fashion-subtitle">Website design</div>
                    <div class="fashion-icon">+</div>
                  </div>
                  <img src="./images/image-box03.png" alt="" />
                </div>
              </div>
              <div class="images-box">
                <div class="image-box">
                  <div class="image-fashion">
                    <div class="fashion-title">Trend and fashion</div>
                    <div class="fashion-subtitle">Website design</div>
                    <div class="fashion-icon">+</div>
                  </div>
                  <img src="./images/image-box03.png" alt="" />
                </div>
              </div>
              <div class="images-box">
                <div class="image-box">
                  <div class="image-fashion">
                    <div class="fashion-title">Trend and fashion</div>
                    <div class="fashion-subtitle">Website design</div>
                    <div class="fashion-icon">+</div>
                  </div>
                  <img src="./images/image-box03.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="testimonials">
        <div class="title">
          <span>our clients’</span> testimonials
        </div>
        <div class="long-line"></div>
        <div class="short-line"></div>
        <div class="container">
          <div
            id="carousel-example-generic"
            class="carousel slide"
            data-ride="carousel"
          >
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li
                data-target="#carousel-example-generic"
                data-slide-to="0"
                class="active"
              ></li>
              <li
                data-target="#carousel-example-generic"
                data-slide-to="1"
              ></li>
              <li
                data-target="#carousel-example-generic"
                data-slide-to="2"
              ></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <div class="testimonials-box">
                 
                  <div class="desc">
                    This book is a treatise on the theory of ethics, very
                    popular during the Renaissance. The first line of Lorem
                    Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
                    section 1.10.32.
                  </div>
                  <div class="subtitle">Dean Martin, CEO Acme Inc.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="contact">
        <div class="container">
          <div class="content-center">
            <div class="title">feel free to contact us</div>
            <div class="long-line"></div>
            <div class="short-line"></div>
            <div class="desc">
              Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
              Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
              written in 45 BC. This book is a treatise on the theory of ethics,
              very popular during the Renaissance.
            </div>
            <div class="input-box">
              <div class="input-text">
                Name<span>*</span>
                <input type="text" class="name" />
              </div>

              <div class="input-text">
                Email address<span>*</span>
                <input type="email" class="email" />
              </div>
              <div class="input-message">
                message<span>*</span>
                <input type="text" class="message" />
              </div>
            </div>
            <div class="contact-btn">SEND</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 内容结束 -->
    <div class="footer">
      <div class="container">
        <div class="footer-left">
          ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span>
        </div>
        <div class="footer-right">
          <img src="./images/footer-icon01.png" alt="" />
          <img src="./images/footer-icon02.png" alt="" />
          <img src="./images/footer-icon03.png" alt="" />
          <img src="./images/footer-icon04.png" alt="" />
          <img src="./images/footer-icon05.png" alt="" />
        </div>
      </div>
    </div>
  </body>
  <script src="./js/jquery-3.7.1.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/less.min.js"></script>
</html>
